import React, { useState, useEffect } from "react";
import moment from "moment";
import { Form, Input, Button, Table, Space, DatePicker,Select } from "antd";
import axios from "../../../http/index";
import TitelSmall from "../../../components/TitleSmall/TitelSmall";
export default function AuditTask() {
  const { Option } = Select;
  const [state, setState] = useState({
    selectedRowKeys: [],
  });
  const [excelData, setexcelData] = useState([]);
  const [selctfendan, setselctfendan] = useState([]);

  //表单数据
  const columns = [
    {
      title: "订单编号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "提交时间",
      dataIndex: "creat_time",
      key: "creat_time",
      render: (text, record) => {
        if (record.creat_time) {
          let span = record.creat_time;
          let timer = span.split("T");
          let datatime = timer[1].split(".");
          return (
            <div>
              {timer[0]}&nbsp;&nbsp;{datatime[0]}
            </div>
          );
        }
      },
    },
    {
      title: "用户账号",
      dataIndex: "account",
      key: "account",
    },
    {
      title: "贷款金额",
      dataIndex: "loan_amount",
      key: "loan_amount",
    },
    {
      title: "还款状态",
      dataIndex: "repayment_status",
      key: "repayment_status",
    },
    {
      title: "订单状态",
      key: "order_status",
      dataIndex: "order_status",

      render: (text, record) => {
        let span = "";
        if (record.order_status == 1) {
          span = <span style={{ color: "#343434" }}>待审核</span>;
        } else if (record.order_status == 2) {
          span = <span style={{ color: "green" }}>已放款</span>;
        } else if (record.order_status == 3) {
          span = <span style={{ color: "blue" }}>已审核</span>;
        } else if (record.order_status == 4) {
          span = <span style={{ color: "red" }}>已删除</span>;
        }
        return <div>{span}</div>;
      },
    },
    {
      title: "操作",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <a>查看订单 {record.id}</a>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
      order_status: 1,
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
      order_status: 3,
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];

  //添加key
  const addkey = (data) => {
    return data.filter((item) => (item.key = item.id));
  };

  useEffect(() => {
    // addDataList({ page: 1, limits: 10 });
    //分单用户
    axios({
      method: "GET",
      url: "/system/rriskcontrolaudit/taskprocessing/dingchaxunyonghu",
      params: "",
    })
      .then((res) => {
        setselctfendan(res.data.data)
        console.log('分单列表返回',selctfendan)
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const onFinish = (values) => {
    addDataList(values);
  };

  const addDataList = (values) => {
    //返回时间格式
    let timer = "";
    if (values) {
      if (values.applyTime) {
        timer = moment(values.applyTime._d).format("YYYY-MM-DD HH:mm:ss");
        console.log(timer);
      } else {
        timer = "";
      }
    } else {
      timer = "";
    }
    // const params = {
    //   account:"",
    //   creat_time:"",
    //   id: "",
    //   page: 1,
    //   limits: 10,
    // };
    const params = {
      account: values.status || "",
      creat_time: timer || "",
      id: values.user || "",
      page: 1,
      limits: 10,
    };
    console.log("Success:", params);
    axios({
      method: "GET",
      url: "/system/rriskcontrolaudit/taskprocessing/dingshaixuanchaxun",
      params,
    })
      .then((res) => {
        console.log("数据返回", res);
        const excdata = addkey(res.data.data);
        setexcelData(excdata);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //多选框的选中
  const onSelectChange = (selectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setState({ selectedRowKeys });
  };

  //分单
  const fendan = () => {};
  function handleChange(value) {
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
  }

  //导出
  const exportExcel = () => {};

  //时间处理
  function range(start, end) {
    const result = [];
    for (let i = start; i > end; i++) {
      result.push(i);
    }
    return result;
  }
  function disabledDate(current) {
    // Can not select days before today and today
    return current && current > moment().endOf("day");
  }
  function disabledDateTime() {
    return {
      disabledHours: () => range(0, 24).splice(4, 20),
      disabledMinutes: () => range(30, 60),
      disabledSeconds: () => [55, 56],
    };
  }

  const { selectedRowKeys } = state;
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div>
      <TitelSmall type="筛选查询"></TitelSmall>
      <div className="50">
        <Form onFinish={onFinish} className="select-box">
          <Form.Item label="输入搜索" name="user" style={{ width: "250px" }}>
            <Input allowClear placeholder="订单编号/用户账号"></Input>
          </Form.Item>
          <Form.Item label="申请人" name="userqq" style={{ width: "250px" }}>
            <Input allowClear placeholder="贷款人姓名/手机号码"></Input>
          </Form.Item>
          <Form.Item
            label="申请时间"
            name="applyTime"
            style={{ width: "250px" }}
          >
            <DatePicker
              format="YYYY-MM-DD HH:mm:ss"
              disabledDate={disabledDate}
              disabledTime={disabledDateTime}
              showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
            />
          </Form.Item>
          <Form.Item>
            <Button
              htmlType="submit"
              style={{
                width: "120px",
              }}
              className="login-form-button"
            >
              搜索
            </Button>
          </Form.Item>
        </Form>
      </div>
      <TitelSmall type="数据列表"></TitelSmall>
      <div style={{ marginBottom: 16 }} className="buton-box">
        <div style={{ marginLeft: 8 }}>
          <span>
            {hasSelected
              ? `当前选中 ${selectedRowKeys.length} 条数据`
              : "暂未选中"}
          </span>
        </div>
        <div className="btn-group">
          <Button
            className="btn-ev"
            type="primary"
            onClick={() => fendan()}
            disabled={!hasSelected}
          >
            分单
          </Button>
          <Button
            className="btn-ev"
            type="primary"
            onClick={() => exportExcel()}
            disabled={!hasSelected}
          >
            导出
          </Button>
        </div>
      </div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={excelData}
      />
      风控专员:
      <Select
      placeholder="请选择风控专员"
      allowClear
        labelInValue
        style={{ width: 120 }}
        onChange={handleChange}
        autoClearSearchValue
      >
        {
          selctfendan.map((item) =>(
            <Option value={item.id}>{item.username}</Option>
          ))
        }
      </Select>
      ,
    </div>
  );
}
